const echarts = require('../../components/ec-canvas/echarts.min');
let myChart;

Page({
  data: {
    account: null,
    ec: {
      onInit: function(canvas, width, height, dpr) {
        myChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 必写：解决小程序视图模糊的问题
        });
        canvas.setChart(myChart);
        myChart.setOption({
          color: ['#67E0E3', '#9FE6B8', '#F2960D'],
          title: {
            text: '余额账户概况',
            textStyle: {
              fontWeight: '500',
              fontSize: 15,
              color: '#000'
            },
            x: 'left',
            y: '0'
          },
          legend: {
            data: ['累计消费', '可用余额', '目前冻结'],
            top: '30rpx',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}: {c} ({d}%)'
          },
          series: [{
            name: '',
            type: 'pie',
            left: 'center',
            startAngle: 270,
            label: {
              normal: {
                position: 'outside',
                formatter: '{c}'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            data: [
              {value: 0, name: '累计消费'},
              {value: 0, name: '可用余额'},
              {value: 0, name: '目前冻结'}
            ]
          }]
        });
        
        return myChart;
      }
    }
  },
  onLoad: async function () {
    let memberInfo, account = this.data.account;
    if (await wx.user.hasLogin()) {
      memberInfo = wx.getStorageSync('rf_member');
      account = [
        {name: '余额', page: 'balance', value: memberInfo.account.user_money, icon: 'wallet'},
        {name: '积分', page: 'points', value: memberInfo.account.user_integral, icon: 'pie'},
        {name: '卡券', page: 'coupon', value: memberInfo.coupon_num, icon: 'coupon'},
        {name: '佣金', page: 'brokerage', value: memberInfo.promoter ? memberInfo.promoter.user_brokerage : 0, icon: 'wealth'}
      ];
    }
    wx.showLoading({
      title: '统计中……',
    });
    setTimeout(() => {
      wx.hideLoading();
      this.setData({
        account: account
      });
      if (memberInfo) {
        let option = myChart.getOption();
        option.series[0].data[0].value = Math.abs(Number(memberInfo.account.consume_money));
        option.series[0].data[1].value = Math.abs(Number(memberInfo.account.user_money));
        option.series[0].data[2].value = Math.abs(Number(memberInfo.account.frozen_money));
        myChart.setOption(option);
      }
      /*myChart.setOption({
        color: ['#67E0E3', '#9FE6B8', '#F2960D'],
        title: {
          text: '余额账户概况',
          textStyle: {
            fontWeight: '500',
            fontSize: 15,
            color: '#000'
          },
          x: 'left',
          y: '0'
        },
        legend: {
          data: ['累计消费', '可用余额', '目前冻结'],
          top: '30rpx',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} {b}: {c} ({d}%)'
        },
        series: [{
          name: '',
          type: 'pie',
          left: 'center',
          startAngle: 270,
          label: {
            normal: {
              position: 'outside',
              formatter: '{c}'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold'
              }
            }
          },
          data: [
            {value: memberInfo && Math.abs(memberInfo.account.consume_money) || 0, name: '累计消费'},
            {value: memberInfo && Math.abs(memberInfo.account.user_money) || 0, name: '可用余额'},
            {value: memberInfo && Math.abs(memberInfo.account.frozen_money) || 0, name: '目前冻结'}
          ]
        }]
      });*/
    }, 1500);
  },
  detail: function (e) {
    let page = e.currentTarget.dataset.page;
    if (!page) return;
    wx.navigateTo({
      url: page
    });
  }
})